<template>
    <div class="shop-right">
        <!-- 内容 -->
        <div class="page-preview">
            <cell-tip tip="一键设置店铺风格，让你的店铺更加美观" />
            <p class="page-h3">当前风格示例</p>
            <div class="preview-box">
                <div class="preview-item">
                    <div class="preview-bg">
                        <img src="/src/assets/images/bg.png" />
                        <div class="preview-item__title">
                            <el-icon size="14px"> <ArrowLeft /> </el-icon>下单
                        </div>
                    </div>

                    <view class="page-content" style="background: #f9f9f9">
                        <view class="page-address">
                            <view class="" style="background: #fff">
                                <view
                                    class="address"
                                    style="margin: 0 7px"
                                    :style="{ background: colorObjs.vice_bg }"
                                >
                                    <view class="address-left">
                                        <view
                                            class="tag"
                                            :style="{
                                                background: colorObjs.main_bg,
                                            }"
                                        >
                                            寄
                                        </view>
                                        <view
                                            style="
                                                display: flex;
                                                flex-direction: column;
                                                margin-left: 5px;
                                            "
                                        >
                                            <view
                                                style="
                                                    font-size: 10px;
                                                    font-weight: bold;
                                                "
                                                >寄件人信息</view
                                            >
                                            <view
                                                style="
                                                    font-size: 8px;
                                                    color: #5e6474;
                                                "
                                                >请填写寄件人信息</view
                                            >
                                        </view>
                                    </view>
                                    <view
                                        style="font-size: 8px; color: #5e6474"
                                    >
                                        地址簿
                                    </view>
                                </view>
                                <view
                                    class="address"
                                    style="margin: 5px 7px"
                                    :style="{ background: colorObjs.vice_bg }"
                                >
                                    <view class="address-left">
                                        <view
                                            class="tag"
                                            :style="{
                                                background: colorObjs.tag_bg,
                                            }"
                                        >
                                            收
                                        </view>
                                        <view
                                            style="
                                                display: flex;
                                                flex-direction: column;
                                                margin-left: 5px;
                                            "
                                        >
                                            <view
                                                style="
                                                    font-size: 10px;
                                                    font-weight: bold;
                                                "
                                                >收件人信息</view
                                            >
                                            <view
                                                style="
                                                    font-size: 8px;
                                                    color: #5e6474;
                                                "
                                                >请填写收件人信息</view
                                            >
                                        </view>
                                    </view>
                                    <view
                                        style="font-size: 8px; color: #5e6474"
                                    >
                                        地址簿
                                    </view>
                                </view>
                            </view>
                        </view>
                        <img src="/src/assets/images/orderBg.png" />
                        <view
                            class="itinerary"
                            :style="{ color: colorObjs.main_text }"
                        >
                            昆明市——玉溪市
                        </view>
                        <div class="sku-checkbox">
                            <el-icon :color="colorObjs.main_bg" size="10px">
                                <SuccessFilled />
                            </el-icon>
                        </div>
                        <view
                            class="price"
                            :style="{ color: colorObjs.main_price }"
                        >
                            ￥100
                        </view>
                        <view
                            class="price2"
                            :style="{ color: colorObjs.main_price }"
                        >
                            ￥100
                        </view>
                        <view
                            class="createOrder"
                            :style="{
                                background:
                                    'linear-gradient(to right, ' +
                                    colorObjs.main_bg +
                                    ',' +
                                    colorObjs.btn_bg +
                                    ')',
                            }"
                        >
                            下单
                        </view>
                    </view>
                </div>
                <div class="preview-item" style="background: #f9f9f9">
                    <div class="preview-bg">
                        <img src="/src/assets/images/bg.png" />
                        <div class="preview-item__title">
                            <el-icon size="14px"> <ArrowLeft /> </el-icon>订单
                        </div>
                    </div>
                    <view class="page-content">
                        <img src="/src/assets/images/orderBg2.png" />
                        <view
                            class="payState"
                            :style="{ color: colorObjs.main_text }"
                        >
                            支付状态
                        </view>
                        <view
                            class="payState2"
                            :style="{ color: colorObjs.main_text }"
                        >
                            待付款
                        </view>
                        <view
                            class="payState3"
                            :style="{ background: colorObjs.main_bg }"
                        ></view>
                        <view
                            class="price3"
                            :style="{ color: colorObjs.main_price }"
                        >
                            ￥100
                        </view>
                        <view class="createOrder3"> 取消订单 </view>
                        <view
                            class="createOrder2"
                            :style="{
                                background:
                                    'linear-gradient(to right, ' +
                                    colorObjs.main_bg +
                                    ',' +
                                    colorObjs.btn_bg +
                                    ')',
                            }"
                        >
                            立即支付
                        </view>
                        <view
                            class="orderState"
                            :style="{
                                color: colorObjs.vice_text,
                                background: colorObjs.vice_bg,
                            }"
                        >
                            类型:个人
                        </view>
                        <view
                            class="liner"
                            :style="{ background: colorObjs.main_bg }"
                        ></view>
                    </view>
                </div>
                <!-- <div class="preview-item">
                    
                </div> -->
            </div>
        </div>
        <!-- 右侧 -->
        <div class="preview-edit">
            <div class="preview-edit__head">
                <div class="preview-edit__head-one flexs">
                    <p>风格设置</p>
                </div>
                <div class="preview-edit__head-dec">
                    专业设计师设计众多风格搭配，任你选择
                </div>
            </div>
            <div class="preview-edit__body">
                <p class="hot-item__title">主题色</p>
                <div class="preview-themes">
                    <div
                        :class="[{ actives: cur === index }, 'themes-item']"
                        :style="{ background: item.main_bg }"
                        v-for="(item, index) in colors"
                        :key="item.main_bg"
                        @click="selectTheme(item, index)"
                    ></div>
                </div>
            </div>
        </div>
    </div>

    <div class="foot-btn-old flexs-center">
        <el-button
            type="primary"
            size="large"
            :loading="btn_loading"
            @click="handleConfirm"
            >保存</el-button
        >
    </div>
</template>

<script setup>
import { getCurrentInstance, ref, onMounted } from "vue";
import {
    SuccessFilled,
    Check,
    QuestionFilled,
    ArrowLeft,
} from "@element-plus/icons-vue";
import CellTip from "@components/cell-tip.vue";

const { proxy } = getCurrentInstance();

onMounted(() => {
    getDetail();
    // colorObjs.value=colors.value[0]
});
/**
 * 颜色选择
 * @param {Object} colorObjs 选择的风格
 * @param {Array} colors 风格数组
 * @param {Number} cur 风格数组索引
 */
const colorObjs = ref({});
const cur = ref(0);
const colors = ref([
    {
        main_bg: "#026DED",
        main_price: "#EE4B00",
        main_text: "#026DED",
        tag_text: "#fff",
        tag_bg: "#FDA312",
        vice_bg: "#F5F9FF",
        vice_text: "#226AFF",
        btn_bg: "#6D97FD",
    },
    {
        main_bg: "#F46725",
        main_price: "#EE2000",
        main_text: "#F46725",
        tag_text: "#fff",
        tag_bg: "#0BB86A",
        vice_bg: "#FFF1EB",
        vice_text: "#F46725",
        btn_bg: "#FFA052",
    },
]);
const selectTheme = (item, index) => {
    if (cur.value === index) return;
    cur.value = index;
    colorObjs.value = item;
};

const sid = ref("");
//查询
const getDetail = () => {
    proxy.$axios.get("/decorates/style").then((res) => {
        if (res.data.code == 200) {
            sid.value = res.data.data.sid;
            getInfo(res.data.data.sid);
        } else {
            proxy.$message({ message: res.data.msg, type: "error" });
        }
    });
};
function getInfo(id) {
    console.log("id", id);
    proxy.$axios.get("/decorates/" + id + "/content").then((res) => {
        if (res.data.code == 200) {
            var result = res.data.data;
            if (result.style.colorObjs) {
                colorObjs.value = result.style.colorObjs;
                cur.value = result.style.cur;
            } else {
                colorObjs.value = colors.value[0];
            }
        } else {
            proxy.$message({ message: res.data.msg, type: "error" });
        }
    });
}

// 保存
const btn_loading = ref(false);
const handleConfirm = () => {
    let objs = {
        cur: cur.value,
        colorObjs: colorObjs.value,
    };
    btn_loading.value = true;
    if (sid.value) {
        //编辑
        proxy.$axios
            .put("/decorates/" + sid.value, {
                content: JSON.stringify(objs),
                title: "风格管理",
                type: 2,
            })
            .then((res) => {
                btn_loading.value = false;
                if (res.data.code == 200) {
                    proxy.$message({ message: "保存成功！", type: "success" });
                } else {
                    proxy.$message({ message: res.data.msg, type: "error" });
                }
            })
            .catch((err) => {
                btn_loading.value = false;
            });
    } else {
        proxy.$axios
            .post("/decorates", {
                content: JSON.stringify(objs),
                title: "风格管理",
                type: 2,
            })
            .then((res) => {
                btn_loading.value = false;
                if (res.data.code == 200) {
                    proxy.$message({ message: "保存成功！", type: "success" });
                } else {
                    proxy.$message({ message: res.data.msg, type: "error" });
                }
            })
            .catch((err) => {
                btn_loading.value = false;
            });
    }
};
</script>

<style lang="less" scoped>
.preview-box {
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;

    .preview-item {
        margin-left: 60px;
        width: 230px;
        position: relative;
        border: 1px solid #ededed;
        display: flex;
        flex-direction: column;

        &:first-child {
            margin-left: 0;
        }

        .preview-bg {
            height: 54px;
            width: 228px;
            overflow: hidden;
            position: relative;

            .preview-item__title {
                font-size: @font-size-sm;
                position: absolute;
                top: 32px;
                left: 10px;
                display: flex;
                align-items: flex-end;
            }
        }

        .page-content {
            // padding: 10px 20px;
            font-size: 10px;

            .page-address {
                // width: 100%;
                background: #fff;
                border-radius: 10px;
                // padding: 10px;

                .address {
                    // width: 100%;
                    padding: 10px;
                    border-radius: 5px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    .address-left {
                        flex: 1;
                        display: flex;
                        align-items: center;

                        .tag {
                            width: max-content;
                            font-size: 10px;
                            line-height: 10px;
                            padding: 2px;
                            border-radius: 40px;
                            color: #fff;
                        }
                    }
                }
            }
            .itinerary {
                position: absolute;
                left: 13px;
                top: 160px;
                font-size: 8px;
                font-weight: bold;
                content: "";
            }

            .sku-checkbox {
                position: absolute;
                right: 31px;
                top: 249px;
            }
            .price {
                font-size: 10px;
                font-weight: bold;
                position: absolute;
                right: 20px;
                top: 368px;
            }
            .price2 {
                font-size: 10px;
                font-weight: bold;
                position: absolute;
                left: 30px;
                top: 431px;
            }
            .price3 {
                font-weight: bold;
                position: absolute;
                left: 38px;
                top: 201px;
            }
            .createOrder {
                position: absolute;
                right: 10px;
                top: 432px;
                font-size: 10px;
                padding: 5px 10px;
                border-radius: 20px;
                color: #fff;
            }
            .createOrder2 {
                position: absolute;
                right: 16px;
                top: 200px;
                font-size: 8px;
                line-height: 8px;
                padding: 5px 8px;
                border-radius: 20px;
                color: #fff;
            }
            .orderState {
                position: absolute;
                right: 5px;
                top: 111px;
                font-size: 8px;
                line-height: 8px;
                padding: 5px 8px;
                border-radius: 0 8px 0 8px;
            }
            .createOrder3 {
                position: absolute;
                right: 70px;
                top: 200px;
                font-size: 8px;
                line-height: 8px;
                padding: 5px 8px;
                border-radius: 20px;
                color: #8f95a5;
                background: #f7f7f9;
            }

            .payState {
                position: absolute;
                font-size: 9px;
                font-weight: 550;
                top: 61px;
                left: 50px;
            }
            .payState2 {
                position: absolute;
                font-size: 9px;
                top: 87px;
                left: 20px;
            }
            .payState3 {
                width: 12px;
                height: 2px;
                position: absolute;
                top: 103px;
                left: 26px;
            }
            .liner {
                width: 30px;
                height: 2px;
                position: absolute;
                top: 170px;
                left: 96px;
            }
        }
    }
}

.hot-item__title {
    font-size: @font-size-md;
    color: @gray-8;
    padding: @padding-sm @padding-md;
}

.item-con {
    color: #323232;
    padding: 7px 14px;
    border: 1px solid #ebedf0;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}

.item-con-active {
    color: #4b93fa !important;
    background-color: #edf4ff !important;
    border: 1px solid #4b93fa;
}

.label-con {
    flex: none;
    width: 82px;
    font-size: 14px;
    padding-right: 10px;
    color: @gray-7;
}

.preview-color {
    padding: 0 @padding-md @padding-sm;

    .preview-color__text {
        color: @gray-7;
        display: flex;
        align-items: center;
    }

    .p-popover {
        font-size: @font-size-md;
        color: #595961;
        margin: @margin-xs 0px;
    }

    .preview-color {
        margin-top: @margin-xs;
    }
}

.preview-themes {
    display: flex;
    flex-flow: row wrap;
    margin: @margin-sm @margin-md;

    .themes-item {
        margin: 0 @margin-md @margin-md 0px;
        width: 20px;
        height: 20px;
        cursor: pointer;

        &.actives {
            outline: 1px solid @themes;
            outline-offset: 2px;
        }
    }
}

.page-h3 {
    padding: 0 0 @padding-xl;
    font-size: @font-size-md;
    color: @gray-8;
}

.shop-right {
    flex: 1;
    display: flex;
    align-items: flex-start;
    height: calc(100vh - 120px);

    .page-preview {
        flex: 1;
        background-color: #fff;
        margin-right: @margin-sm;
        position: relative;
        background-color: #fff;
        // height: 100%;
        min-width: 850px;
        padding: @padding-mdl;
        padding-bottom: 100px;
    }

    .preview-edit {
        flex: none;
        width: 376px;
        height: 100%;
        background-color: #fff;
        padding-bottom: 100px;

        .preview-edit__head {
            border-bottom: 1px solid #f2f4f6;
            padding: @padding-lg @padding-md;

            .preview-edit__head-one {
                font-size: 18px;
                font-weight: bold;
                color: @gray-8;
            }

            .preview-edit__head-dec {
                font-size: @font-size-md;
                color: @gray-6;
                margin-top: @margin-sm;
            }
        }
    }
}
</style>
